<script setup lang='ts' name="policy-add">
import type { PlusColumn } from 'plus-pro-components'

import { useRejectOrder } from '@fl/api/supplier'
import { SubmitBtn } from '@fl/components'

const { isPending, mutate } = useRejectOrder()

const visible = defineModel<boolean>('visible', { required: true })

const id = defineModel<string>('id')

const form = ref()

const state = ref({
    remark: '',
})

const columns: PlusColumn[] = [
    {
        fieldProps: {
            showWordLimit: true,
        },
        label: '拒绝理由',
        labelWidth: '100px',
        prop: 'remark',
        valueType: 'textarea',
    },
]

const rules = {
    remark: [
        {
            message: '请输入拒绝理由',
            required: true,
        },
    ],
}

async function submit() {
    const valid = await form.value.formInstance.validate()
    if (valid) {
        const params = {
            id: String(id.value),
            remark: state.value.remark,
        }
        mutate(params, {
            onSuccess: () => {
                ElMessage.success('操作成功')
                cancel()
            },
        })
    }
}

function cancel() {
    visible.value = false
}

function reset() {
    id.value = ''
    form.value.formInstance.resetFields()
}
</script>

<template>
    <PlusDialog v-model="visible"
                title="拒绝接单原因"
                width="700"
                close-on-press-escape
                :has-footer="false"
                @cancel="cancel"
                @closed="reset"
    >
        <PlusForm ref="form"
                  v-model="state"
                  :columns="columns"
                  :label-width="120"
                  :rules="rules"
                  :has-footer="false"
                  :row-props="{ gutter: 20 }"
        />

        <div class="mx-auto mt20 flex justify-center">
            <el-button @click="cancel">
                取消
            </el-button>

            <SubmitBtn type="primary"
                       :loading="isPending"
                       @click="submit"
            >
                提交
            </SubmitBtn>
        </div>
    </PlusDialog>
</template>
